<div class="box">
	<h3><?php echo lang('uploaded_image') ?></h3>
	<div class="photoList">
		<?php foreach ($images as $i => $image) { ?>
			<div class="photoListItem">
				<div class="listItemSeparator"></div>
				<div class="thumbnail">
					<a href="<?php echo url_create('site', 'photo', 'index', $image->id) ?>" target="_blank">
						<img data-original="<?php echo image_url($image->thumb) ?>" class="lazy thumbImg" src="<?php echo image_url($i == 0 ? $image->thumb : 'images/grey.gif') ?>" alt="<?php echo $image->title ?>"/>
						<noscript>
							<img class="thumbImg" src="<?php echo image_url($image->thumb) ?>" alt="<?php echo $image->title ?>" />
						</noscript>
					</a>
				</div>
				<div class="info" style="position: relative">
					<h2><a href="<?php echo url_create('site', 'photo', 'index', $image->id) ?>" target="_blank"><?php echo smileys_parse($image->title) ?></a></h2>
					<div class="uploader">
						<?php echo lang('uploaded_by') ?> <a href="<?php echo url_create('site', 'account', 'images', $uploader->id) ?>"><?php echo $uploader->fullname ?></a>
						<?php echo time2str($image->upload_date)?>
					</div>
					<div class="stats">
						<span title="<?php echo lang('views_count') ?>" class="views"><?php echo $image->views ?></span>
						<span title="<?php echo lang('comments_count') ?>" class="comments"><?php echo $image->comments ?></span>
						<div data-href="<?php echo url_create('site', 'photo', 'index', $image->id) ?>" class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="true" data-font="arial"></div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		<?php } ?>
		<div id="listEnd"></div>
	</div>
	<?php if ($pagination->next) { ?><a href="<?php echo url_create('site', 'account', 'images',$uploader->id . '/' . $pagination->next) ?>" class="buttons nextListPage" style="display: block">xem thêm, còn nhiều lắm</a><?php } ?>
	<div class="clear"></div>
</div>

<script>
	var lock=false;
	var fixedTop = ($('#header').position()).top+$('#header').height()+20;
	function message(str){
		if(!lock){
			lock=true;
			alert(str);
			lock=false;
		}
	}
	$(window).scroll(function(){
		var yHeader = ($('#header').position()).top+$('#header').height()+20;
		$('.info').each(function(){
			var yInfo = ($(this).position()).top;
			var y2Info = yInfo+$(this).height();
			var yThumb = ($(this).prev().position()).top;
			var y2Thumb = yThumb + $(this).prev().height();
			if(yHeader>yInfo && yHeader+$(this).height()<y2Thumb)
			{
				$(this).css({
					position: 'fixed',
					top: fixedTop+'px'
				})
			}else if(yInfo<yThumb || y2Info>=y2Thumb){
				$(this).css({
					position: 'relative',
					top: '0px'
				})
			}
		})
	});
</script>